<template>
	<view class="page page-bg page-recharge">
		<view class="page-body">
			<scroll-view class="scroll-view" :scroll-y="true">
				<view class="page-wrapper recharge-wrapper">
					<view class="qr-text">该地址仅支持BSC/BEP20相关资产</view>
					<!-- <view class="page-qr" :style="{background: 'url('+$_BASE_IMG_API+'/static/qr_bg@3x.png)'}"> -->
					<view class="page-qr">
						<view class="qr-code">
							<tki-qrcode class="code-img" ref="qrcode" :size="220" :val="walletAddress"
								@result="qrR" />
						</view>
					</view>
					<view class="page-split">接收地址</view>
					<view class="page-form">
						<view class="form-item">
							<view class="item-field">
								<input class="item-input" :value="walletAddress" disabled />
							</view>
						</view>
					</view>
				</view>
				<view class="page-bottom">
					<button class="btn-primary border-round" @click="onCopy(walletAddress)">复制</button>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex'
	import tkiQrcode from "./components/tki-qrcode/tki-qrcode.vue";
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				qrSrc: ""
			}
		},
		computed:{
			...mapGetters({
				walletAddress: "user/getWalletAddress"
			}),
		},
		methods: {
			onCopy(val) {
				uni.setClipboardData({
					data: val,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			qrR(res) {
				this.qrSrc = res
			}
		},
		mounted() {
			this.$refs.qrcode._makeCode()
		}
	}
</script>

<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;

		/* #endif */
		&.page-bg {
			// background: url('/static/images/bg@3x.png') no-repeat center top / cover;
			background-color: #fff;
		}

		.page-body {
			position: relative;
			flex: 1;
			overflow-y: hidden;

			.page-wrapper {
				padding: 32rpx;
			}

			.page-bottom {
				box-sizing: border-box;
				position: absolute;
				bottom: 68rpx;
				width: 100%;
				padding: 0 40rpx;
			}
		}

		.scroll-view {
			height: 100%;
		}
	}

	.page-recharge {
		.qr-text {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 44rpx;
			color: #FF8819;
		}

		.page-qr {
			background: url('https://mall.dorylus.chat/uploads/20250222/756bceac6bfaeea453b615054c14a34c.png') no-repeat center top / cover;
			width: 310rpx;
			height: 310rpx;
			padding: 24rpx;
			margin: 96rpx auto;

			.qr-code {
				position: relative;
				display: block;
				width: 260rpx;
				height: 260rpx;
				background: #eee;
				border-radius: 32rpx;
				overflow: hidden;
				box-sizing: border-box;
				padding: 20rpx;

				.code-img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.qr-meta {
				margin: 40rpx 0;
				color: #000;
				text-align: center;
			}
		}

		.page-split {
			position: relative;
			color: #000;
			text-align: center;
			margin: 160rpx 0 80rpx 0;

			&::before {
				position: absolute;
				content: ' ';
				height: 1px;
				width: 28%;
				top: 50%;
				left: 0;
				border-top: 1px solid rgba(30,28,33,0.5);
			}

			&::after {
				position: absolute;
				content: ' ';
				height: 1px;
				width: 28%;
				top: 50%;
				right: 0;
				border-top: 1px solid rgba(30,28,33,0.5);
			}
		}

		.page-form {
			.form-item {
				margin-top: 40rpx;

				&:first-child {
					margin-top: 0;
				}

				.item-label {
					color: #000;
					font-size: 28rpx;
				}

				.item-field {
					margin-top: 20rpx;

					.item-input {
						border: 1px solid var(--mainColor);
						border-radius: 16rpx;
						padding: 22rpx;
						color: #000;
						font-size: 24rpx;
					}

					.item-textarea {
						border: 1px solid var(--mainColor);
						border-radius: 16rpx;
						padding: 22rpx;
						color: #000;
						font-size: 24rpx;
						width: 100%;
						box-sizing: border-box;
					}

					::v-deep .uni-input-placeholder,
					input::placeholder {
						color: rgba(#000, .4);
					}
				}
			}
		}
	}

	.btn-primary {
		background-color: var(--mainColor);
		color: #fff;
		font-size: 28rpx;
	}
</style>